<template>
  <div id="printDom">
    <p class="title">报价单</p>

    <div class="topInfo infoBox">
      <div class="left">
        <div class="item">
          <p class="label">客户：</p>
          <p class="value">{{ provideForm.customerName }}</p>
        </div>
        <div class="item">
          <p class="label">联系人：</p>
          <p class="value">{{ provideForm.firstcontacter }}</p>
        </div>
        <div class="item">
          <p class="label">TEL：</p>
          <p class="value">{{ provideForm.telephone }}</p>
        </div>
        <div class="item">
          <p class="label">FAX：</p>
          <p class="value">{{ provideForm.fax }}</p>
        </div>
        <div class="item">
          <p class="label">型号：</p>
          <p class="value"></p>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <p class="label">供方：</p>
          <p class="value">{{ needForm.partyBName }}</p>
        </div>
        <div class="item">
          <p class="label">联系人：</p>
          <p class="value">{{ provideForm.adminName }}</p>
        </div>
        <div class="item">
          <p class="label">TEL：</p>
          <p class="value">{{ needForm.telephone }}</p>
        </div>
        <div class="item">
          <p class="label">FAX：</p>
          <p class="value">{{ needForm.fax && needForm.fax }}</p>
        </div>
        <div class="item">
          <p class="label">地址：</p>
          <p class="value">{{ needForm.address }}</p>
        </div>
      </div>
    </div>
    <table class="table" border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>规格型号</th>
          <th>数量</th>
          <th>单价</th>
          <th>金额</th>
          <th>材质</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in provideForm.products"
          :key="item.id"
          class="center"
        >
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.specification }}</td>
          <td>{{ item.num }}</td>
          <td>{{ item.onePrice }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.material }}</td>
          <td>{{ item.remark }}</td>
        </tr>
        <tr>
          <td colspan="4">
            总计：￥{{ provideForm.price + provideForm.discountMoney }}
          </td>
          <td colspan="4" v-if="provideForm.isDiscount == 1">
            优惠后：￥{{ provideForm.price }}
          </td>
          <!-- <td style="text-align: center">{{ provideForm.price }}</td> -->
        </tr>
        <tr>
          <td colspan="8">交付方式：{{ provideForm.payDescription }}</td>
        </tr>
        <tr>
          <td colspan="8">交货日期：{{ provideForm.deliveryTime }}天之后</td>
        </tr>
        <tr>
          <td colspan="8">验收标准：{{ provideForm.checkRule }}</td>
        </tr>
      </tbody>
    </table>
    <div class="infoBox">
      <div class="left">
        <div class="item">
          <p class="label">客户确认签名回复</p>
        </div>
        <div class="item">
          <p class="label date">
            <span>年</span><span>月</span><span>日</span>
          </p>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <p class="label">报价人：{{ provideForm.adminName }}</p>
        </div>
        <div class="item">
          <p class="label date">
            <span>{{
              new Date(provideForm.createTime).getFullYear() +
              "年" +
              new Date(provideForm.createTime).getMonth() +
              "月" +
              new Date(provideForm.createTime).getDate() +
              "日"
            }}</span>
          </p>
        </div>
      </div>
    </div>
    <footer>
      <!-- <p>Page <span class="page-number">2222</span></p> -->
    </footer>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      // provideForm: {//甲方（供方）
      //   name: '浙江泰集光电科技有限公司',
      //   contractNmae: '刘工',
      //   phone: '125000',
      //   fax: '',
      //   specification: '手板模型'
      // },
      provideForm: {},
      // needForm: {//乙方（需方）
      //   name: '杭州贝思特模型有限公司',
      //   contractNmae: '田东',
      //   phone: '0571-88978386',
      //   fax: '0571-8898385',
      //   address: '余杭区良诸街道良运街332号4号楼3楼'
      // },
      needForm: {}
    }
  },

}
</script>
<style lang="scss" scoped>
#printDom {
  position: relative;
  padding: 20px;
  // padding-top: 20px;

  .title {
    text-align: center;
    font-size: 20px;
  }
  .infoBox {
    display: flex;
    width: 100%;
    margin: 30px 0;
    line-height: 1.8em;
    .left,
    .right {
      flex: 1;
    }
    .item {
      display: flex;
    }
    .date {
      margin-top: 20px;
      margin-left: 10px;
      span {
        margin: 0 20px;
      }
    }
  }
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    // border: 1px #333 solid;

    th {
      height: 32px;
      font-weight: normal !important;
      // border: 1px #333 solid;
    }
    td {
      min-height: 40px;
      padding: 5px;
      // border: 1px #333 solid;
    }
    .center {
      text-align: center;
    }
  }
  .tip {
    position: absolute;
    bottom: -20%;
    right: 20px;
  }
}
</style>
<style lang="scss" scoped>
@media print {
  @page {
    // margin-top: 0;
    // margin-bottom: 0;
    margin: 0;
  }
  footer::after {
    content: "商业机密，请勿外泄";
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
  }

  /* body {
    margin: 1cm;
  } */
}
footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  height: 2cm;
  background-color: lightgray;
  text-align: center;
}
</style>